<template>
  <div>
    <!-- 单条评论模块 -->
    <van-cell-group>
      <van-cell
        :title="name"
        :label="content"
        label-class="message-lable"
        center
      >
        <!-- 点赞效果 -->
        <template #right-icon>
          <van-icon name="like-o" v-if="likeShow" @click="likeClick" />
          <van-icon name="like" v-else color="red" @click="likeClick" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "MessageItem",
  props: {
    name: String,
    content: String,
  },
  data() {
    return {
      likeShow: true,
    };
  },
  methods: {
    likeClick() {
      this.likeShow = !this.likeShow;
    },
  },
};
</script>

<style lang="less" scoped>
/* 组件背景色透明 */
.van-cell,
.van-cell-group {
  background-color: rgba(255, 255, 255, 0);
}
.message-lable {
  color: black;
}
</style>